<template>
    <div class="content" :style="contentStyle">
        <div class="bgOpacity"></div>
    <div class="article-contain" :style="articleContainStyle" ref="articlecontain">
        <div class="article-orders" v-for="(article,index) in item.articles" :key="index"
        :style="articleOrdersStyle(article,index)" :ref="'article' + index" :class="isFinished ? 'suc' : ''"
             @touchstart.stop="article.isOptioned && !isFinished? articleStart(article,index,$event) : ''"
             @touchmove.stop="article.isOptioned && !isFinished? articleMove(article,index,$event) : ''"
             @touchend.stop="article.isOptioned && !isFinished? articleEnd(article,index,$event) : ''">
            <img :src="isLosShow || article.optionImgShow? article.imageUrl : article.optionImageUrl" alt="" v-if="article.isOptioned || article.optionImgShow">
            <div class="question" v-if="!article.isOptioned && !article.optionImgShow"></div>
            <div class="article-name" v-if="article.nameShow">{{article.isOptioned ? isLosShow ? article.name : article.optionName : article.name}}</div>
        </div>
    </div>

<!--        底部意象-->
        <div class="options-contain" v-if="optionArticleShow" :style="optionsContainStyle" ref="options">
            <div class="options" v-for="(option,oIndex) in articleArr" :key="oIndex"
                 :style="articleOptionStyle(option,oIndex)"
                 @touchstart.stop="!isFinished ? start(option,oIndex,$event) :''"
                 @touchmove.stop="!isFinished ? move(option,oIndex,$event) : ''"
                 @touchend.stop="!isFinished ? end(option,oIndex,$event) : ''"
            v-show="!option.isVanish">
                <img :src="option.imageUrl" alt="">
            </div>
<!--            <Point ref="point" :style="$refs['articlecontain'] ? pointMoveStyle : ''" v-if="!operated"/>-->
        </div>
    </div>
</template>

<script>
    import { mixins } from "@/common/mixins/assignmentMixins.js"
    // import Point from "../point.vue"
    export default {
        mixins: [mixins],
        data(){
            return{
                isFinished: false,
                nameTimer: null,
                nIndex: 0,
                optionArticleShow: false,   //显示底部意象
                isLosShow: false,  //判断失败
                articleArr: [],
                pointMove: false, //手势提示移动
                operated: false,  //是否操作
            }
        },
        // components:{
        //     Point,
        // },
        beforeMount() {
            this.nIndex = 0
            this.nameTimer = null
            this.item.articles.forEach(item =>{
                this.$set(item,'nameShow',false)
                this.$set(item,'optionImgShow',false)
                this.$set(item,'isMatched',false)
                this.$set(item,'isOptioned',false)
                this.$set(item,'isVanish',false)
                delete item.optionImageUrl
                delete item.optionName
            })
            const arr = JSON.parse(JSON.stringify(this.item.articles))
            this.articleArr = arr.sort(() => { return 0.5 - Math.random() })

        },
        mounted() {
            if(!this.item.isFinished && this.index === this.activeIndex){
                setTimeout(()=>{
                    this.onEnter()
                },3000)
                setTimeout(()=>{
                    this.pointMove = true
                },13000)
            } else {
                this.isFinished = true
                return
            }
        },
        destroyed() {
            clearInterval(this.nameTimer)
        },
        computed:{
            pointMoveStyle(){
                const Right = this.$refs['articlecontain'].getBoundingClientRect().right,
                    Bottom = this.$refs['articlecontain'].getBoundingClientRect().bottom,
                    X = this.$refs['articlecontain'].offsetWidth,
                    Y = this.$refs['articlecontain'].offsetHeight
                return{
                  right: this.pointMove ?  '' : '8rem' ,
                  bottom: this.pointMove ?  '' : '6rem' ,
                  transform: this.pointMove ? "translate3d(" + (-Right + X/2) + "px," + (-Bottom + Y/2) + "px,0)" : '',
                  transition: 'all 2s'
                }
            },
            articleContainStyle(){
                const width = this.item.articles.length * 5 - 1
              return{
                  width: width + 'rem',
                  marginLeft: - width / 2 + 'rem',
              }
            },
            //问题框样式
            articleOrdersStyle(article,index){
                return function (article,index) {
                    return{
                        left: index * 5 + 'rem',
                        filter: this.isLosShow ? 'grayscale(1)' : '',
                        transition: article.transition,
                        transform: "translate3d(" + article.moveX + "px," + article.moveY + "px,0)",
                        zIndex: article.zIndex,
                    }
                }
            },
        //    底部移动意象样式
            articleOptionStyle(option,oIndex){
                return function (option,oIndex) {
                    return{
                        transition: option.transition,
                        transform: "translate3d(" + option.moveX + "px," + option.moveY + "px,0)",
                        zIndex: option.zIndex,
                    }
                }
            },

        //    底部样式
            optionsContainStyle(){
                return{
                    width: Math.ceil(this.item.articles.length / 2) * 2.5 + 'rem'
                }
            }
        },
        methods:{
            start: function (option, oIndex, event) {
                if (this.item.isFinish || this.isFinished || this.isLosShow) {
                    return
                }
                this.$set(option, 'x', event.changedTouches[0].clientX)
                this.$set(option, 'y', event.changedTouches[0].clientY)
                this.$set(option,'transition','all 0s')
                this.$set(option, 'zIndex',99)
                //移动时隐藏名字
                this.$set(option, 'nameShow', true)
                this.operated = true
            },
            move: function (option, oIndex, event) {
                this.$set(option, 'moveX',event.changedTouches[0].clientX - option.x)
                this.$set(option, 'moveY',event.changedTouches[0].clientY - option.y)
            },
            end: function (option, oIndex, event) {
                this.$set(option, 'moveX',0)
                this.$set(option, 'moveY',0)
                this.$set(option, 'transition','all 0.5s')
                this.$set(option, 'zIndex',98)
                const x = event.changedTouches[0].clientX,
                    y = event.changedTouches[0].clientY
                //循环意象 符合则成功
                for (let i = 0, len = this.item.articles.length; i < len; i++) {
                    const ref = 'article' + i,
                        minX = this.$refs[ref][0].getBoundingClientRect().left,
                        minY = this.$refs[ref][0].getBoundingClientRect().top,
                        maxX = minX + this.$refs[ref][0].offsetWidth,
                        maxY = minY + this.$refs[ref][0].offsetHeight,
                        article = this.item.articles[i],
                        isCoord = x >= minX && x <= maxX && y >= minY && y <= maxY,
                        isTypeName = option.name === article.name

                    if (isCoord) {
                        this.touchMusic()
                        if(article.isOptioned){
                            return
                        }
                        this.$set(article, 'optionImageUrl', option.imageUrl)
                        this.$set(article, 'optionName', option.name)
                        //显示名字
                        this.$set(article, 'nameShow', true)
                        //上面的意象显示
                        this.$set(article, 'isOptioned', true)
                        //下面的选项消失
                        this.$set(option, 'isVanish', true)
                        //判断是否是正确的意象
                        if(isTypeName){
                            this.$set(article, 'isMatched', true)
                        }
                        //全部匹配
                        if(this.item.articles.filter(item => {return !item.isOptioned}).length === 0){
                            //全部正确选中
                            if(this.item.articles.filter(item => {return !item.isMatched}).length === 0) {
                                this.isFinished = true
                                if(this.isSeedEntery){
                                    this.setSucLottiePlay()
                                }else {
                                    setTimeout(()=>{
                                        this.perfectMusic()
                                        this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
                                    },1000)
                                }
                                this.addAnswer({
                                    id: this.item.id,
                                    type: true
                                })
                            }  else {
                                setTimeout(()=>{this.isLosShow = true},1000)
                                if(this.isSeedEntery){
                                    setTimeout(()=>{this.$emit('nextAssignment')},3000)
                                } else {
                                    setTimeout(()=>{this.$emit("losShow")},3000)
                                }
                                this.addAnswer({
                                    id: this.item.id,
                                    type: false
                                })
                            }
                        }

                    }
                }
            },

            articleStart: function (article,index, event) {
                if (this.item.isFinish || this.isFinished || this.isLosShow) {
                    return
                }
                this.$set(article, 'x', event.changedTouches[0].clientX)
                this.$set(article, 'y', event.changedTouches[0].clientY)
                this.$set(article,'transition','all 0s')
                this.$set(article, 'zIndex',99)
                //移动时隐藏名字
                this.$set(article, 'nameShow', false)
            },
            articleMove: function (article,index, event) {
                this.$set(article, 'moveX',event.changedTouches[0].clientX - article.x)
                this.$set(article, 'moveY',event.changedTouches[0].clientY - article.y)
            },
            articleEnd: function (article,index, event) {
                this.$set(article, 'moveX',0)
                this.$set(article, 'moveY',0)
                this.$set(article, 'transition','all 0.5s')
                this.$set(article, 'zIndex',98)
                const x = event.changedTouches[0].clientX,
                    y = event.changedTouches[0].clientY
                //循环意象 符合则成功
                for (let i = 0, len = this.item.articles.length; i < len; i++) {
                    let ref = 'article' + i,
                        minX = this.$refs[ref][0].getBoundingClientRect().left,
                        minY = this.$refs[ref][0].getBoundingClientRect().top,
                        maxX = minX + this.$refs[ref][0].offsetWidth,
                        maxY = minY + this.$refs[ref][0].offsetHeight,
                        optionArticle = this.item.articles[i],
                        isCoord = x >= minX && x <= maxX && y >= minY && y <= maxY,
                        isTypeName = article.optionName === optionArticle.name

                    if (isCoord) {
                        this.touchMusic()
                        //显示名字
                        this.$set(optionArticle, 'nameShow', true)
                        //上面的意象显示
                        this.$set(optionArticle, 'isOptioned', true)
                        let convert = JSON.parse(JSON.stringify(article))
                        if(optionArticle.optionImageUrl && optionArticle.optionName){
                            article.optionImageUrl = optionArticle.optionImageUrl
                            article.optionName = optionArticle.optionName
                            optionArticle.optionImageUrl = convert.optionImageUrl
                            optionArticle.optionName = convert.optionName
                            //显示名字
                            this.$set(article, 'nameShow', true)
                            //上面的意象显示
                            this.$set(article, 'isOptioned', true)
                        } else {
                            optionArticle.optionImageUrl = convert.optionImageUrl
                            optionArticle.optionName = convert.optionName
                            delete article.optionImageUrl
                            delete article.optionName
                            //显示名字
                            this.$set(article, 'nameShow', false)
                            //上面的意象显示
                            this.$set(article, 'isOptioned', false)
                        }
                        //判断是否是正确的意象
                        if(isTypeName){
                            this.$set(optionArticle, 'isMatched', true)
                        }
                        //全部匹配
                        if(this.item.articles.filter(item => {return !item.isOptioned}).length === 0){
                            //全部正确选中
                            if(this.item.articles.filter(item => {return !item.isMatched}).length === 0) {
                                this.isFinished = true
                                if(this.isSeedEntery){
                                    this.setSucLottiePlay()
                                }else {
                                    setTimeout(()=>{
                                        this.perfectMusic()
                                        this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
                                    },1000)
                                }
                                this.addAnswer({
                                    id: this.item.id,
                                    type: true
                                })
                            }  else {
                                setTimeout(()=>{this.isLosShow = true},1000)
                                if(this.isSeedEntery){
                                    setTimeout(()=>{this.$emit('nextAssignment')},3000)
                                } else {
                                    setTimeout(()=>{this.$emit("losShow")},3000)
                                }
                                this.addAnswer({
                                    id: this.item.id,
                                    type: false
                                })
                            }
                        }

                    }
                }


            //    放回到底部
                let minX = this.$refs['options'].getBoundingClientRect().left,
                    minY = this.$refs['options'].getBoundingClientRect().top,
                    maxX = minX + this.$refs['options'].offsetWidth,
                    maxY = minY + this.$refs['options'].offsetHeight,
                    isCoord = x >= minX && x <= maxX && y >= minY && y <= maxY
                if (isCoord) {
                    this.touchMusic()
                    //隐藏上面的名字
                    this.$set(article, 'nameShow', false)
                    //显示问号
                    this.$set(article, 'isOptioned', false)
                    //显示下面的图片
                    this.articleArr.forEach(options =>{
                        if(options.name === article.optionName){
                            this.$set(options, 'isVanish', false)
                            console.log(options.name);
                        }
                    })
                    delete article.optionImageUrl
                    delete article.optionName
                }

            },

            onEnter: function () {
                this.updateOperated({questionIndex:this.questionIndex,param:this.index})
                this.nameTimer = setInterval(()=>{
                    this.$set(this.item.articles[this.nIndex],'nameShow',true)
                    this.$set(this.item.articles[this.nIndex],'optionImgShow',true)
                    this.parseTextAudio({
                        text: this.item.articles[this.nIndex].name
                    })
                    this.nIndex++
                    if(this.nIndex === this.item.articles.length){
                        clearInterval(this.nameTimer)
                        setTimeout(()=>{
                            this.item.articles.forEach(item =>{
                                this.$set(item,'nameShow',false)
                                this.$set(item,'optionImgShow',false)
                            })
                            this.optionArticleShow = true
                        },3000)
                    }
                },1000)
            }
        },
        watch: {
            activeIndex: function (activeIndex) {
                if (this.index === activeIndex && !this.item.isFinish) {
                    // 四秒之后在播放意象名字
                    setTimeout(()=>{
                        this.onEnter()
                    },4000)
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
    @import '../../../common/stylus/content.styl'
    @keyframes dropBig
        0%
            transform scale(1)
        50%
            transform scale(1.2)
            filter drop-shadow(0px 0px 0.5rem rgb(254, 172, 81))
        100%
            transform scale(1)
    .bgOpacity
        $coord('WHLT',100%,100%,0,0)
        background url($urlTitle + 'assignment/image/breakthrough/半透明背景60.png')0 0/100% 100%
    .article-contain
        position absolute
        $center('WHLT',28rem,5rem)
        opacity 0
        animation loading-in 1s
        animation-fill-mode forwards
        margin-top -5rem
        .articleMatched
            animation dropBig 1s
            animation-fill-mode forwards
        .article-orders
            $coord('WHLT',4rem,5rem,0,0)
            background url($urlTitle + 'assignment/image/page19/答案卡片背景.png')0 0/100% 100%
            $alignCenter()
            img
                max-width 60%
                max-height 60%
                filter drop-shadow(2px 0px #fff) drop-shadow(-2px 0px #fff) drop-shadow(0px -2px #fff) drop-shadow(0px 2px #fff) drop-shadow(2px 2px 1px #0000004a)
            .question
                position absolute
                $center('WHLT',2rem,2.5rem)
                background url($urlTitle + 'assignment/image/page19/大卡片问号.png')0 0/100% 100%
            .article-name
                position absolute
                $center('WHLT',4rem,1.8rem)
                margin-top 3.2rem
                background url($urlTitle + 'assignment/image/page19/大卡文字背景.png')0 0/100% 100%
                font-size 0.8rem
                color white
                line-height 1.8rem
                text-align center
                opacity 0
                animation loading-in 1s
                animation-fill-mode forwards
    .options-contain
        $coord('WHRB',7.5rem,6rem,2rem,2rem)
        height auto
        transform translate(var(--X), var(--Y))
        display flex
        flex-wrap wrap
        justify-content left
        align-content space-around
        .options
            width 2rem
            height 2.5rem
            margin 0.25rem
            background url($urlTitle + 'assignment/image/page19/答案卡片背景.png')0 0/100% 100%
            $alignCenter()
            img
                max-width 60%
                max-height 60%
                filter drop-shadow(2px 0px #fff) drop-shadow(-2px 0px #fff) drop-shadow(0px -2px #fff) drop-shadow(0px 2px #fff) drop-shadow(2px 2px 1px #0000004a)
</style>
